import React, { Component } from 'react'
import {
  View, TextInput, StyleSheet, Text, Image, SafeAreaView, Navigator
} from 'react-native'
import NavBar from '../../../../../components/PublicHeader';
import { Images } from '../../../../../public/images/images'
import { Constant } from '../../../../../public/js/constant';
import fetchWebApi from '../../../../../public/WebApi/fetchBase';
import { POST_VERPHONE ,LOGIN_VERIFICATION_CODES} from '../../../../../public/WebApi/myInfoDataInterface/userInfoListApi';
import getStorageValue from '../../../../../utils/getStorageValue';
import Layer from '../../../../../utils/Layer';
export default class TelephoneModification extends Component {
  constructor(props) {
    super(props)
    this.state = {
      phonenumber:'',
      VerificationCode:"",
      time: 0,
      MainTime: '',
      MainTimeTitle: '获取验证码',
      timeId: ''
    }


  }

  componentDidMount = () => {
    //console.log(parseInt(this.state.searchTexts))
    // if (password === parseInt(this.state.searchTexts)) {
    //   alert('登入成功')
    // }

  }
  componentDidUpdate = () => {

  }
  async VerificationCodes() {
    console.log(this.state.phonenumber)
    const res = await fetchWebApi(LOGIN_VERIFICATION_CODES, { phone: this.state.phonenumber }, 'POST')
    // console.log("########## getUserMaillist########");
    // console.log(res);
    if (res.status == 200) {
      // console.log(this.state.DATAS)
      // this.setState({
      //   VerificationCode: res.data
      // })


    } else {
      Layer.showMsg(res.msg);
    }
  }
  time = () => {
    console.log(this.state.phonenumber)
 this.VerificationCodes()
    if (this.state.MainTime <= 0) {
      this.setState({
        MainTime: 60,
        MainTimeTitle: ''
      });
      this.bb = setInterval(() => {
        var aa = this.state.MainTime - 1;
        if (aa === 0) {
          clearInterval(this.bb);
          this.setState({
            MainTime: '',
            MainTimeTitle: '重新获取'
          })
        } else {
          this.setState({
            MainTime: aa,
            MainTimeTitle: ''
          })
        }
      }, 1000)
      this.setState({
        timeId: this.bb
      });
    }
  }
  phonenumber(text) {
    this.setState({
      phonenumber: text
    })
  };
  VerificationCode(text) {
    this.setState({
      VerificationCode: text
    })
  };
//
  async resetpassword() {

      const res = await fetchWebApi(POST_VERPHONE,
        { token: await getStorageValue(Constant.TOKEN) ,phone:this.state.phonenumber,code:this.state.VerificationCode}, 'POST');
      if (res.status == 200) {

        Layer.showMsg("密码验证成功")
        this.props.navigation.navigate('TelephoneModification')
      } else if (res.status === 401) {
        console.log(res.status);
        await AsyncStorage.removeItem(Constant.TOKEN);
        this.props.navigation.push('Accountlogin')
        // 弹窗提示
        
      } else {
        Layer.showMsg("获取用户信息列表失败");
      }
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <NavBar
          navigation={this.props.navigation}
          title={""}
        />
        <View style={styles.containers} >
          <Text style={styles.Contenttext}>现手机号验证</Text>
        </View>
        <View>
          <TextInput
            style={styles.inputSearch}
            onChangeText={text => this.phonenumber(text)}
            value={this.state.phonenumber}
            placeholder={"输入手机号码"}
          />
        </View>
        <View>
          <TextInput
            style={styles.inputSearch}
            onChangeText={text => this.VerificationCode(text)}
            value={this.state.VerificationCode}
            keyboardType={'numeric'}
            placeholder={"输入验证码"}
          />
          <Text style={styles.VerificationCode} onPress={() => { this.time() }}>{this.state.MainTime}{this.state.MainTimeTitle}</Text>
        </View>
        <View style={styles.tail}>
          <Text style={styles.Login } onPress={()=>{this.resetpassword()}}> 确定</Text>
        </View>
      </SafeAreaView >
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    backgroundColor: 'white',
  },
  layer: {
    display: 'flex',
    justifyContent: 'space-around'
    , alignItems: 'center',
    flexDirection: 'row',
    marginTop: 120

  },
  Textred: {
    color: 'white'
  },
  inputSearch: {
    height: 50,
    width: "80%",
    backgroundColor: 'rgba(232, 236, 240, 0.5)',
    marginTop: 20,
    borderRadius: 20,
    marginLeft: "10%",
    paddingLeft: 20,
    fontSize: 16,
    fontWeight: '500',
    color: 'rgba(0, 0, 0, 0.31)'
    // TextIndent: 20
  },
  containers: {
    marginTop: '10%',
    alignItems: 'center',
    marginBottom:20
  },
  move: {
    marginLeft: '8%'
  },
  Contenttext: {
    fontSize: 25,
    color: '#000000',
    fontWeight: 'bold',
  },
  Contenttexts: {
    fontSize: 13,
    color: 'rgba(0, 0, 0, 0.56)',
    marginLeft: 45,
    marginTop: 5,
    fontWeight: 'bold'
  },
  VerificationCode: {
    marginTop: 20,
    color: '#4C6BDC',
    height: 50,
    textAlign: 'center',
    lineHeight: 50,
    position: 'absolute',
    right: 60,
    borderBottomRightRadius: 10,
    borderTopRightRadius: 10,
    fontSize: 15
  },
  colors: {
    color: '#4C6BDC'
  },
  Login: {
    width: '80%',
    backgroundColor: '#4C6BDC',
    height: 40,
    borderRadius: 20,
    textAlign: 'center',
    lineHeight: 40,
    fontSize: 20,
    color: '#FFFFFF'
  },
  middle: {
    flexDirection: 'row',
    marginTop: 20,
    marginLeft: '10%'
  },
  tail: {
    display: 'flex',
    width: '100%',
    marginTop: 30,
    alignItems: 'center',
  },
  tails: {
    display: 'flex',
    marginTop: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: "80%",
    marginLeft: '10%'
  },
  Tailcolor: {
    color: 'rgba(0, 0, 0, 0.5)'
  }

})